<div class="main"
    style="height:85vh;width: 100%; margin:0 auto; margin-top:3%;overflow: hidden; position:relative;">
    <d-toast [value]="msgs" [life]="3000"></d-toast>
    <app-tool-bar></app-tool-bar>
    <!-- <div style="height:10%;width: 100%;">
        <app-tool-bar></app-tool-bar>
    </div> -->
    <div class="headerx"
        style="display: flex;width: 80%;margin: 0 auto; flex-wrap: nowrap;align-items: bottom;position: relative;">
        <d-search [size]="'sm'" [(ngModel)]="searchText" (searchFn)="onSearch($event)"
            [ngModelOptions]="{ updateOn: 'blur' }">
        </d-search>

        <d-button class="head-btn" [disabled]="isAvaliable || !isSaved" (click)="addNewRow(isAvaliable || !isSaved)"><i
                class="icon icon-add"></i>新增</d-button>
        <d-button class="head-btn" [disabled]="isAvaliable || !isSaved"
            (click)="openDeleteDialog(isAvaliable || !isSaved)"><i class="icon icon-add"></i>删除已选项</d-button>

        <span style="position: absolute;right: 0;align-self: center;">{{saveTimeStr}}</span>
    </div>
    <d-data-table  #dataTable [dataSource]="basicDataSource" [scrollable]="true" [fixHeader]="true"
        [containFixHeaderHeight]="true" [virtualScroll]="true" tableHeight="85%" [virtualItemSize]="20"
        [virtualMinBufferPx]="80" [virtualMaxBufferPx]="200" [tableWidthConfig]="tableWidthConfig"
        [ngStyle]="{'width':'80%', 'margin':'0 auto', 'background-color':'rgba(211, 230, 230, 0.15)'}" [size]="'sm'">
        <thead dTableHead [checkable]="true">
            <tr dTableRow>
                <th dHeadCell *ngIf="titleSource.length > 0" [minWidth]="'100px'" [maxWidth]="'180px'" [resizeEnabled]="true"
                    (resizeEndEvent)="onResize($event, '$index')"
                    [ngStyle]="{'text-align': 'center', 'padding-right': '20px'}"><span>#</span></th>
                <th dHeadCell *ngFor="let title of titleSource" [minWidth]="'100px'" [maxWidth]="'180px'"
                    [resizeEnabled]="true" (resizeEndEvent)="onResize($event, title.label)"
                    [ngStyle]="{'text-align': 'center', 'padding-right': '20px'}"><span>{{title.label}}</span></th>
            </tr>
        </thead>
        <tbody dTableBody>
            <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex"
                let-nestedLayer="nestedLayer">
                <tr dTableRow [ngClass]="{ 'table-row-selected': rowItem.$checked }">
                    <td dTableCell class="devui-checkable-cell">
                        <d-checkbox [ngModelOptions]="{ standalone: true }"
                            (ngModelChange)="onRowCheckChange($event, rowIndex, nestedIndex, rowItem)"
                            [ngModel]="rowItem.$checked" [halfchecked]="rowItem.$halfChecked"
                            [disabled]="rowItem.$checkDisabled" dTooltip [content]="rowItem.$checkBoxTips"
                            [position]="['top', 'right', 'bottom', 'left']" [showAnimation]="false">
                        </d-checkbox>
                    </td>
                    <td>{{rowIndex+1}}</td>
                    <td dTableCell style="height: 35px;" *ngFor="let title of titleSource;let index1=index;"
                        [editable]="true" [(editing)]="rowItem[title.label]['edit_'+title.label]"
                        [editableTip]="editableTip" [rowItem]="rowItem" [field]="title.label"
                        [beforeEditStart]="beforeEditStart" [beforeEditEnd]="beforeEditEnd"
                        [ngClass]="{'highlight': rowItem[title.label]['edited']}">
                        <span *ngIf="!rowItem[title.label]['edit_'+title.label]">{{ rowItem[title.label].value }}</span>
                        <div *ngIf="rowItem[title.label]['edit_'+title.label]" class="edit-padding-fix">
                            <input class="devui-form-control" name="title.label"
                                [(ngModel)]="rowItem[title.label].value" [attr.maxlength]="100" [attr.minlength]="3" />
                        </div>
                    </td>
                </tr>
            </ng-template>
        </tbody>
    </d-data-table>
    <div style="display: flex;width: 80%;margin: 0 auto; justify-content: space-between; flex-wrap: nowrap;">
        <span *ngIf="titleSource.length > 0 && basicDataSource.length > 0">
            总行数：{{basicDataSource.length}}，总列数：{{titleSource.length}}
        </span>
    </div>
    <div class="btn-group">
        <d-button bsStyle="primary" [disabled]="isAvaliable || !isImport" (click)="saveData(isAvaliable || !isImport)">
            {{saveLabel}} </d-button>
    </div>
</div>
<div *ngIf="!(basicDataSource.length > 0)" style="position:absolute;width:300px;height:200px;left:50%; top:50%;margin-left: -150px;margin-top: -100px;">
    <h2 style="text-align: center;">当前没有数据！</h2>
</div>
<div dLoading *ngIf="loading" [loading]="loading" [backdrop]="false" [message]="'One moment please...'"
    [style.height.px]="80"
    style="position:absolute;width: 300px;height:240px; left:50%; top:50%;margin-left: -150px;margin-top: -120px;">

</div>